<template>
  <div id="comment">
    <transition name="comment-mini-slide">
      <div class="comment-mini" v-if="!show_comment_center">
        <span class="comment-label" @click="showCommentCenter">{{label}}</span>
        <span class="comment-count iconfont icon-comment_light"><em>{{commentCount}}</em></span>
      </div>
    </transition>
    <transition name="mask-fade">
      <div class="mask" @click.stop="cancel" v-if="show_comment_center"></div>
    </transition>
    <transition name="comment-center-slide">
      <div v-if="show_comment_center" class="comment-center">
        <div class="head">
          <span class="cancel" @click.stop="cancel">取消</span>
          <span class="title">评论</span>
          <span class="send" :class="{'on':comment_content.length>0}" @click="(comment_content.length>0)&&send()">发送</span>
        </div>
        <div class="content-wrapper">
          <textarea class="content" :placeholder="content_placeholder" v-model="comment_content"></textarea>
        </div>
      </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import {isLogin, checkLogin, Alert} from 'common/js/mixin'
  import {createComment} from 'api/topic'

  export default {
    mixins: [isLogin, checkLogin, Alert],
    data() {
      return {
        show_comment_center: false,
        comment_content: '',
        reply_id: '',
        loginname: '',
        content_placeholder: '请输入评论'
      }
    },
    props: {
      commentCount: {
        type: Number,
        default: 0
      },
      topicId: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: '发表评论...'
      }
    },
    methods: {
      showCommentCenter() {
        this.show_comment_center = true
      },
      cancel() {
        this.show_comment_center = false
        this.comment_content = ''
        this.reply_id = ''
        this.loginname = ''
        this.content_placeholder = '请输入评论'
      },
      send() {
        this._checkLogin().then((res) => {
          if (res === false) {
            return false
          }
          if (!this.comment_content) {
            this.showAlert({
              style: 'warning',
              content: '请输入评论内容！'
            })
            return false
          }
          if (!this.topicId) {
            this.showAlert({
              style: 'warning',
              content: '唉呀,出错了！'
            })
            return false
          }
          let commentContent = this.comment_content
          if (this.loginname) {
            commentContent = `@${this.loginname} ${commentContent}`
          }
          createComment(this.userInfo.user_token, this.topicId, commentContent, this.reply_id).then((res) => {
            if (res.success === true) {
              this.showAlert({
                content: '评论发布成功！'
              })
              this.reply_id = ''
              this.loginname = ''
              this.comment_content = ''
              this.show_comment_center = false
              this.$emit('reFresh')
            } else {
              this.showAlert({
                style: 'warning',
                content: res.error_msg
              })
            }
          })
        })
      },
      replyComment(id, loginname) {
        if (!id || !loginname) {
          return
        }
        this.reply_id = id
        this.show_comment_center = true
        this.loginname = loginname
        this.content_placeholder = `回复:${loginname}`
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #comment {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .comment-mini {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 35px;
      width: 100%;
      background-color: #fafafa;
      border-top: 1px solid #dedede;
      box-sizing: border-box;
      padding: 8px 15px;
      display: flex;
      align-items: center;
      &.comment-mini-slide-enter-active, &.comment-mini-slide-leave-active {
        transition: all .5s;
      }
      &.comment-mini-slide-enter, &.comment-mini-slide-leave-to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
      }
      .comment-label {
        display: inline-block;
        cursor: pointer;
        flex: 1;
        font-size: $font-size-medium;
        letter-spacing: 1px;
        color: $color-active;
      }
      .comment-count {
        text-align: right;
        position: relative;
        padding-right: 15px;
        font-size: $font-size-large;
        em {
          text-align: center;
          display: inline-block;
          position: absolute;
          top: -5px;
          left: 10px;
          font-size: $font-size-small-s;
          background-color: #ff3333;
          font-style: normal;
          color: $color-text-w;
          padding: 2px 3px;
          border-radius: 10px;
          min-width: 10px;
        }
      }
    }
    .mask {
      width: 100%;
      position: fixed;
      bottom: 0;
      top: 0;
      background-color: $color-background-l;
      &.mask-fade-enter-active, &.mask-fade-leave-active {
        transition: all .5s;
      }
      &.mask-fade-enter, &.mask-fade-leave-to {
        opacity: 0;
      }
    }
    .comment-center {
      width: 100%;
      position: relative;
      &.comment-center-slide-enter-active, &.comment-center-slide-leave-active {
        transition: all .5s;
      }
      &.comment-center-slide-enter, &.comment-center-slide-leave-to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
      }
      .head {
        border-top: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        box-sizing: border-box;
        background-color: #fafafa;
        height: 35px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        span {
          flex: 1;
          display: inline-block;
          text-align: center;
          font-size: $font-size-medium;
          color: #666;
          &.cancel {
            font-size: $font-size-small;
            text-align: left;
            color: $color-active;
            cursor: pointer;
          }
          &.send {
            font-size: $font-size-small;
            text-align: right;
            color: #aaaaaa;
            cursor: not-allowed;
            &.on {
              color: $color-active;
              cursor: pointer;
            }
          }
        }
      }
      .content-wrapper{
        background-color:#ffffff;
        .content {
          border: none;
          margin: 0;
          width: 100%;
          height: 120px;
          resize: none;
          box-sizing: border-box;
          padding: 10px;
          font-size: $font-size-medium;
          line-height: 20px;
          &::placeholder {
            color: #666666;
          }
        }
      }
    }
  }
</style>
